<script setup lang="ts">
definePageMeta({
    layout: 'login'
})
import { MessagePlugin } from 'tdesign-vue-next';
import { useAuth } from '../../store/auth';
const authStore = useAuth();
const router = useRouter();

// 页面信息
useSeoMeta({
    title: '用户登录'
})

onMounted(() => {
    authStore.setIsRegisterPageFlag(false);
})

// 表单数据
const formData = reactive({
    phone: '',
    password: ''
})

// 充值表单
const onReset = () => { }
// 提交表单
const onSubmit = async () => {
    login(formData).then((res) => {
        console.log(res);
        
        if(res.success){
            MessagePlugin.success({
                content: res.message
            })
            // 检查token信息是否存在
            let token = localStorage.getItem('token');
            // 判断token是否有效
            if(token === null || token === undefined) {
                // token不存在，写入token信息
                localStorage.setItem('token', JSON.stringify(res.token));
            }else{
                // token存在，但是需要更新
                localStorage.removeItem('token');
                localStorage.setItem('token', JSON.stringify(res.token));
            }
            
            router.replace('/manager/home')
            return ;
        }
    }).catch((err) => {
        MessagePlugin.error({
            content: err.message
        })
        return ;
    })
}
</script>
<template>
    <div class="login-form">
        <t-form ref="form" :data="formData" :colon="true" :label-width="0" @reset="onReset" @submit="onSubmit">
            <t-form-item name="account">
                <t-input v-model="formData.phone" clearable size="large" placeholder="请输入手机号码">
                    <template #prefix-icon>
                        <t-icon name="mobile" />
                    </template>
                </t-input>
            </t-form-item>

            <t-form-item name="password">
                <t-input v-model="formData.password" type="password" clearable size="large" placeholder="请输入密码">
                    <template #prefix-icon>
                        <t-icon name="lock-on" />
                    </template>
                </t-input>
            </t-form-item>

            <t-form-item>
                <t-button theme="primary" type="submit" block size="large">登录</t-button>
            </t-form-item>
        </t-form>
    </div>
</template>
<style></style>